<template>
  <div class="list-pages white-bg">
    <div class="search-form-box">
      <a-form :model="formState" name="horizontal_login" :label-col="labelCol" autocomplete="off" @finish="onFinish">
        <a-row :gutter="[16, 16]">
          <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-show="expand">
            <a-form-item label="姓名" name="real_name">
              <a-input v-model:value="formState.real_name" placeholder="请输入姓名">
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-show="expand">
            <a-form-item label="账号" name="login_name">
              <a-input v-model:value="formState.login_name" placeholder="请输入账号">
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-show="expand">
            <a-form-item label="账号状态" name="enabled">
              <a-select v-model:value="formState.enabled" placeholder="请选择账号状态">
                <a-select-option :value="false">启用</a-select-option>
                <a-select-option :value="true">禁用</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="9" :xl="9" v-show="expand">
            <a-form-item label="开通时间" name="dateRange">
              <a-range-picker v-model:value="formState.dateRange" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
            <a-form-item>
              <div class="search-btn-box" :class="{ pt: expand }">
                <a-button :icon="h(SearchOutlined)" type="primary" html-type="submit" class="search-btn">查询</a-button>
                <a-button :icon="h(ReloadOutlined)" class="reset-btn" @click="resetForm">清空</a-button>
                <a class="expand-btn" style="font-size: 12px; margin-left: 12px" @click="expand = !expand">
                  <template v-if="expand">
                    <UpOutlined />
                  </template>
                  <template v-else>
                    <DownOutlined />
                  </template>
                  {{ expand ? "收起查询" : "展开查询" }}
                </a>
              </div>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="opt-button-box">
      <a-button type="primary" class="btn" @click="handleAdd">
        <img src="/icons/common/icon-add.png" class="icon" />新增账号</a-button>
    </div>
    <div class="table-wrapper" ref="tableRef">
      <a-table class="table-box" row-key="index" :columns="columns" :dataSource="tableData" :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)
        " sticky :scroll="{ y: true, x: 1100 }" :pagination="pagination" @change="onChange">
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex == 'real_name'">
            {{ record.user?.real_name || '-' }}
          </template>
          <template v-if="column.dataIndex == 'login_name'">
            {{ record.user?.login_name|| '-' }}
          </template>
          <template v-if="column.dataIndex == 'create_time'">
            {{ record.created || '-' }}
          </template>
          <template v-if="column.dataIndex == 'enabled'">
            {{ record?.customer?.enabled ? "启用" : "禁用" }}
          </template>
          <template v-if="column.dataIndex == 'dealer_name'">
            {{ record?.customer?.name || '-' }}
          </template>
          <template v-if="column.dataIndex == 'operation'">
            <a-button type="link" class="link" @click="handleDetail(record)">
              查看
            </a-button>
            <a-button type="link" class="link" @click="handleEdit(record)">
              编辑
            </a-button>
            <a-button type="link" class="link" @click="handleEnabled(record)">
              {{ record?.customer?.enabled ? "禁用" : "启用" }}
            </a-button>
            <a-button type="link" class="link" @click="handleDelte(record)">
              删除
            </a-button>
            <a-button type="link" class="link" @click="handleReset(record)">
              重置密码
            </a-button>
          </template>
        </template>
      </a-table>
    </div>
    <a-modal v-model:open="enabledOpen" :title="datas.customer?.enabled ? '禁用' : '启用'" @ok="handleAPIEnabled">
      <div class="option-dialog">
        <div class="title">确定要{{ datas.customer?.enabled ? "禁用" : "启用" }}客户吗？</div>
        <div class="content">
          <div class="item">客户名称：{{ datas.customer?.name }}</div>
          <div class="item">联系人：{{ datas.user?.real_name || '-' }}</div>
        </div>
      </div>
    </a-modal>
    <a-modal v-model:open="resetOpen" title="重置密码" @ok="handleAPIRest">
      <div class="option-dialog">
        <div class="title">确定要重置密码为“123456”</div>
        <div class="content">
          <div class="item">姓名：{{ datas.user?.real_name }}</div>
          <div class="item">账号：{{ datas.user?.login_name }}</div>
        </div>
      </div>
    </a-modal>
    <a-modal v-model:open="deleteOpen" title="删除" @ok="handleAPIDelete">
      <div class="option-dialog">
        <div class="title">确定要删除管理员吗？该操作不可逆，请谨慎</div>
        <div class="content">
          <div class="item">姓名：{{ datas.user?.real_name }}</div>
          <div class="item">账号：{{ datas.user?.login_name }}</div>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script setup>
import { ref, computed, h, onMounted, onUnmounted } from "vue";
import {
  SearchOutlined,
  ReloadOutlined,
  DownOutlined,
  UpOutlined,
} from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
import { useGlobalStore } from "@/store/modules/global";
import API from "@/api/administrator";
import columns from "./columns";
import { message } from "ant-design-vue";
const store = useGlobalStore();
const router = useRouter();
// 查询表单布局配置信息
const labelCol = { style: { width: "80px" } };
//查询表单数据
const formState = ref({
  real_name: "",
  login_name: "",
  enabled: null,
  dateRange: [],
});
//重置表单方法
const resetForm = () => {
  formState.value = {
    real_name: "",
    login_name: "",
    enabled: null,
    dateRange: [],
  };
  getData();
};
// 监听窗口大小变化，动态调整查询表单的展开状态
const windowWidth = ref(window.innerWidth);
const expand = ref(true);
// 表单提交事件处理函数
function onFinish(values) {
  console.log("Success:", values);
  getData();
}
const tableData = ref([]);
// 分页信息处理函数
const onChange = (page) => {
  current.value = page.current;
  pageSize.value = page.pageSize;
  getData();
};
//当前页码和每页条数
const current = ref(1);
const pageSize = ref(10);
// 表格分页配置信息
const total = ref(0);
const pagination = computed(() => ({
  position: ["bottomCenter"],
  total: total.value,
  current: current.value,
  pageSize: pageSize.value,
  showSizeChanger: true,
  size: "large",
  showTotal: (total) => `共 ${total} 条`,
}));
// 表格数据获取方法
const getData = async () => {
  let params = {
    current: current.value,
    pageSize: pageSize.value,
    real_name: formState.value.real_name || "",
    login_name: formState.value.login_name || "",
    enabled: formState.value.enabled || null,
    dateRange: formState.value.dateRange || [],
  };
  const res = await API.CustomerUserPagedList({
    args: params,
  });
  tableData.value = res.data;
  total.value = res.total;
};

const datas = ref({});
//新增
const handleAdd = () => {
  store.setSubTitle("新增超级管理员账号");
  router.push("super-management-option");
};
//查看详情
const handleDetail = (data) => {
  store.setSubTitle("查看超级管理员账号");
  router.push(`super-management-detail?id=${data.customer_user_id}`);
};
//编辑客户信息
const handleEdit = (data) => {
  console.log("编辑客户", data);
  store.setSubTitle("编辑超级管理员账号");
  router.push(`super-management-option?id=${data.customer_user_id}`);
};
//删除客户
const deleteOpen = ref(false);
const handleDelte = (data) => {
  datas.value = data;
  deleteOpen.value = true;
};
const handleAPIDelete = async () => {
  const res = await API.CustomeruserDelete({ customer_user_id: datas.value.customer_user_id });
  console.log(111, res);
  deleteOpen.value = false;
  if (res) {
    message.success("删除成功");
    await getData();
  } else {
    message.error("删除失败");
  }
};
//禁用
const enabledOpen = ref(false);
const handleEnabled = (data) => {
  datas.value = data;
  enabledOpen.value = true;
};
const handleAPIEnabled = async () => {
  let params = {
    ...datas.value?.customer,
    enabled: !datas.value?.customer.enabled,
  };
  const res = await API.CustomerUpdate(params);
  enabledOpen.value = false;
  if (res) {
    message.success("操作成功");
    await getData();
  } else {
    message.error("操作失败");
  }
};
//重置密码
const resetOpen = ref(false);
const handleReset = (data) => {
  datas.value = data;
  resetOpen.value = true;
};
const handleAPIRest = async () => {
  console.log(datas.value)
  let params = {
    ...datas.value.user,
    login_password: "123456",
  };
  const res = await API.UserUpdate(params);
  resetOpen.value = false;
  if (res) {
    message.success("重置密码成功，新密码为123456");
    await getData();
  } else {
    message.error("重置密码失败");
  }
};
onMounted(() => {
  windowWidth.value = window.innerWidth;
  if (windowWidth.value > 768) {
    expand.value = true;
  } else {
    expand.value = false;
  }
  window.addEventListener("resize", () => {
    windowWidth.value = window.innerWidth;
    if (windowWidth.value > 768) {
      expand.value = true;
    } else {
      expand.value = false;
    }
  });
  getData();
});
onUnmounted(() => {
  window.removeEventListener("resize", () => { });
});
</script>
<style lang="less" scoped>
.list-pages {
  height: 100%;
  padding: 0 16px;
  display: flex;
  flex-direction: column;

  .search-box {
    display: flex;
    align-items: center;
    padding: 18px 0;
    flex-wrap: wrap;
    border-bottom: 1px solid #e5e7eb;

    .search-select {
      width: 120px;
    }

    .line {
      width: 1px;
      height: 16px;
      margin: 0 12px;
      background: #bec4ca;

      @media screen and (max-width: 768px) {
        display: none;
      }
    }

    .search-input-box {
      flex: 1;
      display: flex;
      align-items: center;

      @media screen and (max-width: 768px) {
        width: 100%;
        margin-top: 16px;
        justify-content: space-between;
      }
    }

    .search-input {
      flex: 1;
    }

    .search-btn {
      width: 60px;
      height: 32px;
      background: #2776ff;
      border-radius: 4px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      text-align: center;
      line-height: 32px;
    }
  }

  .table-wrapper {
    width: 100%;
    flex: 1;
    overflow: hidden;

    .table-box {
      height: 100%;
    }
  }

  .list-box {
    width: 100%;
    box-sizing: border-box;
    padding-top: 16px;
    overflow: auto;
    display: grid;
    gap: 16px;
    margin: 0 auto;
    grid-template-columns: repeat(auto-fill, minmax(261px, 1fr));
    justify-content: space-between;

    .list-item {
      width: 261px;
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-sizing: border-box;
      padding: 8px;
      margin: auto;
      position: relative;
      cursor: pointer;

      &:hover {
        border: 1px solid #2776ff;
        box-shadow: 12px 12px 12px 0px rgba(39, 118, 255, 0.1);
      }

      .item-collect {
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        width: 32px;
        height: 32px;
        background: rgba(0, 0, 0, 0.4) url(@/assets/icon-collet.png) no-repeat center center;
        border-radius: 0 8px 0 12px;

        &.cur {
          background: #ffffff url(@/assets/icon-collet-cur.png) no-repeat center center;
          border-radius: 0 8px 0 12px;
        }
      }

      .list-img {
        width: 245px;
        height: 249px;
        background: #f3f3f3;
        border: 1px solid #e6ebf1;
        border-radius: 8px;
        box-sizing: border-box;

        img {
          width: 100%;
          height: 100%;
          border-radius: 8px;
        }
      }

      .list-content {
        padding: 14px 0 6px;
        display: flex;
        flex-direction: column;

        .content-title {
          font-family: PingFangSC-Medium;
          font-weight: 500;
          font-size: 16px;
          color: #31323a;
          margin-bottom: 10px;
          line-height: 24px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .content-col {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .col-user {
            display: flex;
            align-items: center;

            .user-img {
              width: 26px;
              height: 26px;
              border-radius: 50%;
            }

            .user-name {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 12px;
              color: #262626;
              line-height: 16px;
              text-align: left;
              font-style: normal;
            }
          }

          .col-date {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #8c8c8c;
            line-height: 16px;
            text-align: center;
            font-style: normal;
          }
        }
      }
    }
  }

  .pagination-box {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
